<template>
	<div class="home_box">
		<el-container>
			<!-- 头部 开始 -->
		  <el-header class="header">
				<div class="left">
					<div class="logo">
						<img src="../assets/img/logo.png" >
					</div>
					<div class="name">xxx管理系统</div>
				</div>
				<div class="right">
					<div class="avatar">
						<img src="../assets/img/avatar.png" >
					</div>
					<div class="logout">
						<el-button type="info" @click="handleLogout()">退出</el-button>
					</div>
				</div>
			</el-header>
			<!-- 头部 结束 -->
			<!-- 内容 开始 -->
		  <el-container>
				<!-- 导航栏 开始 -->
		    <el-aside :width="isCollapse ? '200px' : '64px' ">
					<!-- 展开/折叠 按钮 -->
					<div class="expandBtn" @click="handleCollapse()">
						<i :class="['iconfont', isCollapse?'icon-zhedie1':'icon-xiangyouzhankai']"></i>
					</div>
					<el-menu
						ref="elMenuRef"
						:default-active="current_index"
						:collapse-transition="false"
						:collapse="!isCollapse"
						background-color="#373D41"
						text-color="#fff"
						active-text-color="#409EFF"
						unique-opened
						:router="true"
						@open="handleOpen"
						@select="handleSelect">
						<!-- 一级菜单 -->
						<el-menu-item
							:index="'/home/dashbord'"
							:key="'/home/dashbord'"
							@click="setCurrentIndex('/home/dashbord')">
							<i class="el-icon-monitor"></i>
							<span slot="title">首页</span>
						</el-menu-item>
						<el-submenu 
							:index="'/home/' + item.path" 
							:key="'/home/' + item.path" 
							v-for="item in menuList">
							<template slot="title">
								<i :class="['iconfont', icons[item.id]]"></i>
								<span>{{item.authName}}</span>
							</template>
							<!-- 二级菜单 -->
							<el-menu-item 
								:index="'/home/' + item2.path" 
								:key="'/home/' + item2.path" 
								v-for="item2 in item.children"
								@click="setCurrentIndex('/home/' + item2.path)">
								<i class="el-icon-setting"></i>
								<span slot="title">{{item2.authName}}</span>
							</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-aside>
				<!-- 导航栏 结束 -->
				<!-- 主体 开始 -->
		    <el-main>
					<!-- 面包屑 开始 -->
					<div class="breadcrumb" v-show="breadcrumbList.length>0">
						<el-breadcrumb separator-class="el-icon-arrow-right">
						  <el-breadcrumb-item :to="{ path: '/home/dashbord' }">首页</el-breadcrumb-item>
						  <el-breadcrumb-item 
								v-for="item in breadcrumbList"
								:key="item">{{item}}</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<!-- 面包屑 结束 -->
					<!-- 子路由组件 渲染位置 -->
					<router-view></router-view>
				</el-main>
				<!-- 主体 结束 -->
		  </el-container>
			<!-- 内容 结束 -->
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data(){
			return {
				//菜单数据
				menuList: [],
				//导航栏是否展开
				isCollapse: true,
				//导航栏图标
				icons: {
					'125': 'icon-yonghuguanli',
					'103': 'icon-quanxianguanli',
					'101': 'icon-shangpinguanli',
					'102': 'icon-dingdanguanli',
					'145': 'icon-shujutongji',
				},
				//当前激活菜单项的索引
				current_index: '',
				//最后展开的菜单项的index
				lastExpandIndex: '',
				//面包屑列表 
				breadcrumbList: []
			}
		},
		created() {
			//请求菜单数据
			this.getMenuList()
			
			//解决：刷新页面，掉失导航栏激活选项的问题。
			this.getCacheCurrentIndex()
		},
		//解决：用户手动修改地址栏的路由地址时，导航栏激活选项无法同步的问题。
		beforeRouteUpdate(to, from, next){
			this.setCurrentIndex(to.path)
			//解决：切换到看板项时，无法自动收起上一个展开的菜单项的问题。
			this.handleSelect(to.path)
			next()
		},
		watch: {
			//计算面包屑列表数据
			current_index(){
				this.getBreadCrumbList()
			}
		},
		methods: {
			async getMenuList(){
				const { data: res } = await this.$axios.get('/menus')
				this.menuList = res.data
				//console.log(this.menuList)
				
				//解决：刷新页面，掉失面包屑的问题。
				this.getBreadCrumbList()
			},
			//展开或折叠导航栏
			handleCollapse(){
				this.isCollapse =  !this.isCollapse
			},
			//退出登录
			handleLogout(){
				//清除缓存中的token
				window.sessionStorage.clear()
				//转到登录页
				this.$router.push('/login')
			},
			//更新 & 缓存激活菜单项的index
			setCurrentIndex(current_index){
				this.current_index = current_index
				window.sessionStorage.setItem('current_index', current_index)
			},
			//取出缓存中的激活菜单项的index
			getCacheCurrentIndex(){
				if(window.sessionStorage.getItem('current_index')){
					this.current_index = window.sessionStorage.getItem('current_index')
				}
			},
			//菜单项展开事件回调
			handleOpen(index){
				this.lastExpandIndex = index
			},
			//激活菜单项时的回调
			handleSelect(index){
				if(index === '/home/dashbord'){
					//解决：切换到看板项时，无法自动收起上一个展开的菜单项的问题。
					this.$refs.elMenuRef.close(this.lastExpandIndex)
				} 
			},
			//计算面包屑列表数据
			getBreadCrumbList(){
				//console.log(this.current_index)
				let curIndex = this.current_index.split('/').pop()
				//console.log(curIndex)
				//console.log(this.menuList)
				 
				let res = this.menuList.find(item => {
					if(item.path === curIndex ){
						return true
					}
					
					if(item.children){
						let res2 = item.children.find(item2 => {
							if(item2.path === curIndex){
								return true
							}
						})
						
						if(res2){
							return true
						}
					}
				})
				//console.log(res)
				
				let breadcrumbList = []
				
				if(res){
					breadcrumbList.push(res.authName)
					if(res.children){
						res.children.find(item => {
							if(item.path === curIndex){
								breadcrumbList.push(item.authName)
								return true
							}
						})
					}
				}
				//console.log(breadcrumbList)
				
				this.breadcrumbList = breadcrumbList
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.el-container{
		height: 100%;
		
		.el-aside{
			-webkit-user-select: none;
			background-color: #373D41;
			
			.expandBtn{
				font-size: 12px;
				line-height: 24px;
				background-color: #4A5064;
				text-align: center;
				
				.iconfont{
					margin-right: 0;
					font-size: 16px;
					color: #ccc;
				}
			}
		}
	}
	.el-menu{
		border-right: none;
	}
	.el-main{
		position: relative;
	}
	.home_box{
		height: 100%;
	}
	.header{
		background-color: #373D41; 
	}
	.left{
		float: left;
		align-items: center;
		display: flex;
		height: 100%;
		
		.logo{
			display: inline-block;
			width: 82px;
			height: 40px;
			
			img{
				width: 100%;
				height: 100%;
			}
		}
		
		.name{
			margin-left: 10px;
			display: inline-block;
			color: #fff;
			font-size: 20px;
		}
	}
	.right{
		float: right;
		display: flex;
		align-items: center;
		height: 100%;
		
		.avatar{
			margin-right: 20px;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			overflow: hidden;
			
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.iconfont, .el-icon-setting{
		margin-right: 10px;
		font-size: 18px;
		color: #ccc;
	}
	.el-icon-setting{
		font-size: 16px;
	}
	.breadcrumb{
		margin-bottom: 10px;
		height: 30px;
	}
	.el-breadcrumb{
		height: 100%;
		font-size: 12px;
		line-height: 30px;
	}
</style>
